<template>
  <div class="calendarWrap">
    <div class="sign-date">
      <div class="date-box">{{dateTop}}</div>
      <div class="line"></div>
    </div>

    <!--星期-->
    <div class="header-day">
      <span v-for="(week,index) in weekList" :key="index">{{week}}</span>
    </div>

    <!--日期-->
    <div class="calendar-box">
      <div class="calendar-item" v-for="(item,index) in list" :key="index">
        <div class="calendar-item-date" v-if="item.otherMonth!=='nowMonth'"></div>
        <div class="calendar-item-date" v-else :class="setClass(item)">{{item.id}}<span class="sign-word"
                                                                                        v-if="item.markClassName">签</span>
        </div>
      </div>
    </div>

  </div>

</template>

<script>
  import timeUtil from "../config/calendar"

  export default {
    props: {
      weekList: {
        type: Array,
        default: () => ["日", "一", "二", "三", "四", "五", "六"]
      },
      sundayStart: {//默认是周一开始,当是true的时候,是周日开始
        type: Boolean,
        default: () => true
      },
      markDateMore: {
        type: Array,
        default: () => []
      },
      signClass: {
        type: String,
        default: ""
      }
    },
    data() {
      return {
        myDate: [],
        list: [],
        dateTop: "",
        showSign: false
      }
    },
    created() {
      this.intStart();
      this.myDate = new Date();
    },
    mounted() {
      this.getList(this.myDate);
    },
    methods: {
      intStart() {
        timeUtil.sundayStart = this.sundayStart;
      },
      setClass(data) {
        let obj = {};
        obj[data.markClassName] = data.markClassName;
        return obj;
      },
      forMatArgs() {
        let array = new Array();
        for (let i = 0; i < this.markDateMore.length; i++) {
          array.push(timeUtil.dateFormat(this.markDateMore[i]));
        }
        return array;
      },
      getList(date) {
        const markDateMore = this.forMatArgs();
        this.dateTop = `${date.getFullYear()}-${((date.getMonth() + 1) < 10 ? "0" : "") + (date.getMonth() + 1)}`;
        let arr = timeUtil.getMonthList(this.myDate);
        for (let i = 0; i < arr.length; i++) {
          let markClassName = "";
          let k = arr[i];
          const nowTime = k.date;
          for (const c of markDateMore) {
            if (c === nowTime) {
              markClassName = this.signClass;
            }
          }
          k.markClassName = markClassName;
        }
        this.list = arr;
      }
    },
    watch: {
      markDateMore: {
        handler(val, oldVal) {
          this.getList(this.myDate);
        }
      },
      sundayStart: {
        handler(val, oldVal) {
          this.intStart();
          this.getList(this.myDate);
        }
      }
    }
  }
</script>

<style lang="stylus" scoped>
  .calendarWrap
    margin: 0 auto
    width: 92.667%
    height: auto
    .sign-date
      display: flex
      justify-content: center
      align-items: center
      width: 100%
      height: 1.706666rem
      .date-box
        font-size: 0.533333rem
        color: rgba(60, 175, 255, 1)
      .line
        position: absolute
        width: 92.667%
        height: 0.093333rem
        background-image: url("../page/sign/line.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
    .header-day
      display: flex
      align-items: center
      width: 100%
      height: 0.946666rem
      background: #3CAFFF
      border-radius: 0.466666rem
      margin-bottom: 0.533333rem
      span
        flex: 1
        text-align: center
        font-size: 0.48rem
        color: #FFF
    .calendar-box
      display: flex
      flex-wrap: wrap
      margin: 0 auto
      width: 100%
      height: 6.16rem
      .calendar-item
        display: flex;
        align-items: center
        justify-content: center
        width: 14.28%;
        text-align: center
        font-size: 0.506666rem
        .calendar-item-date
          fj(center, center)
          margin: 0 auto
          width: 0.75rem
          height: 0.75rem
          line-height: 0.75rem
          font-size: 0.506666rem
          .sign-word
            position: absolute
            right: -0.2rem
            top: -0.05rem
            width: 0.4rem
            height: 0.4rem
            line-height: 0.4rem
            display: flex
            align-items: center
            justify-content: center
            background: rgba(60, 175, 255, 1)
            border-radius: 50%
            font-size: 0.24rem
            color: #FFF
        .sign
          position: relative
          border: 1px solid rgba(60, 175, 255, 1)
          border-radius: 50%
</style>
